<style lang="stylus" rel="stylesheet/stylus" src="./roleGardeAnalysis.styl"></style>
<template>
	<div class="roleGardeAnalysis realTimeDataClass accQuery" :style="{width:pageWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/游戏分析/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="date"
						align="left"
						placeholder="选择日期"
						@change='dateChange' :picker-options="pickerOptions0"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"  class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
					<el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>新增帐号等级分布对比</p>
					<div class="chart1-introduce">
						<el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="留存趋势"
		              width="200"
		              trigger="hover">在线分析图表包括pcu，acu，acu/puc，平均在线时长（分钟）</el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							<el-button type="primary" size="mini" class="excel"  @click.stop="excel('1','游戏内分析-用户等级分析-新增帐号等级分布对比')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
						</template>
						<el-table
				              :data="tableData1"
				              border
				              :default-sort = "{prop: 'time', order: 'descending'}"
							  @sort-change="sortChange"
				              >
							<el-table-column sortable align="center"
		                  v-for="col in tableHeaderAll1" :key='col.label'
		                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>活跃帐号等级分布</p>
					<div class="chart1-introduce">
						<el-popover
					              ref="listChart1_popo"
					              placement="top-start"
					              title="留存趋势"
					              width="200"
					              trigger="hover">在线分析图表包括pcu，acu，acu/puc，平均在线时长（分钟）</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData2'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							<el-button type="primary" size="mini" class="excel"  @click.stop="excel('2','游戏内分析-用户等级分析-活跃帐号等级分布')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
						</template>
						<el-table
				              :data="tableData2"
				              border
				              :default-sort = "{prop: 'time', order: 'descending'}"
							  @sort-change="sortChange2"
				              >
							<el-table-column sortable align="center"
					                  v-for="col in tableHeaderAll2" :key='col.label'
					                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>活跃帐号等级对比</p>
					<div class="chart1-introduce">
						<el-popover
					              ref="listChart1_popo"
					              placement="top-start"
					              title="留存趋势"
					              width="200"
					              trigger="hover">活跃帐号等级对比</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData3'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							<el-button type="primary" size="mini" class="excel"  @click.stop="excel('3','游戏内分析-用户等级分析-活跃帐号等级对比')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
						</template>
						<el-table
				              :data="tableData3"
				              border
				              :default-sort = "{prop: 'time', order: 'descending'}"
							  @sort-change="sortChange3"
				              >
							<el-table-column sortable align="center"
					                  v-for="col in tableHeaderAll3" :key="col.label"
					                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="block datehorizon">
					<el-date-picker 
		                size="small"
		                v-model="dstart"
		                type="date"
		                placeholder="开始日期" @change='dstartChange'></el-date-picker>
					<span>-</span>
					<el-date-picker 
		                size="small"
		                v-model="dend"
		                type="date"
		                placeholder="结束日期" @change='dendChange'></el-date-picker>
				</div>
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>新增帐号等级分布累计</p>
					<div class="chart1-introduce">
						<el-popover
						              ref="listChart1_popo"
						              placement="top-start"
						              title="新增帐号等级分布累计"
						              width="200"
						              trigger="hover">新增帐号等级分布累计</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData4'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							<el-button type="primary" size="mini" class="excel"  @click.stop="excel('4','游戏内分析-用户等级分析-新增帐号等级分布累计')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
						</template>
						<el-table
					              :data="tableData4"
					              border
					              :default-sort = "{prop: 'time', order: 'descending'}"
								  @sort-change="sortChange4"
					              >
							<el-table-column sortable align="center"
						                  v-for="col in tableHeaderAll4" :key="col.label"
						                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
								@size-change="handleSizeChange4"
								@current-change="handleCurrentChange4"
								:current-page="page4.currentPage"
								:page-sizes="page4.pageSizes"
								:page-size="page4.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="page4.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>账号次日流失等级分布</p>
					<div class="chart1-introduce">
						<el-popover
					              ref="listChart1_popo"
					              placement="top-start"
					              title="留存趋势"
					              width="200"
					              trigger="hover">账号次日流失等级分布</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData5'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							<el-button type="primary" size="mini" class="excel"  @click.stop="excel('5','游戏内分析-用户等级分析-账号次日流失等级分布')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
						</template>
						<el-table
				              :data="tableData5"
				              border
				              :default-sort = "{prop: 'time', order: 'descending'}"
							  @sort-change="sortChange5"
				              >
							<el-table-column sortable align="center"
					                  v-for="col in tableHeaderAll5" :key="col.label"
					                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange5"
							@current-change="handleCurrentChange5"
							:current-page="page5.currentPage"
							:page-sizes="page5.pageSizes"
							:page-size="page5.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page5.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		<v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" @gettwo="getData2" :post-obj='postObj' :post-obj2='postObj2' @getlist="getList"></v-advance>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<script src="./roleGardeAnalysis.js"></script>